<template>
	<view>
		<uv-navbar
			:leftIconColor="navstyle.txtColor"
			:titleStyle="titleStyle"
			:title="navstyle.title"
			:leftIcon="navstyle.leftIcon"
			:bgColor="navstyle.bgColor"
			:fixed="false" 
			@leftClick="leftClick"
			:safeAreaInsetTop="false">
		</uv-navbar>
		<view v-if="!dioFlag" class="qian">
			<view v-if="!isShow" @click="showClick"  class="ming">
				<text>手写签名</text>
				<image src="../../static/img/bonus/qianming.png" mode=""></image>
			</view>
			<view v-if="isShow" class="canvas-main">
				<view style="width: 100%;height: 266px;">
					<view class="signa">
						<view class="box" style="width: 100%;height: 266px;">
							 <l-signature 
								disableScroll  
								ref="signatureRef"
								:backgroundColor="bgColor"
								:penColor="penColor" 
								:penSize="penSize" 
								:openSmooth="openSmooth" ></l-signature>
						</view>
					</view>
				</view>
				<view class="btn-list">
					<button @click="onClick('clear')"  class="btn-reset">重置</button>
					<button @click="onClick('save')" class="btn-complete">完成</button>
				</view>
			</view>
			<view @click="radioClick" class="list_input">
				<uv-checkbox-group @change="checkboxChange()" v-model="checkbox" style="display: inline-block;">
					<uv-checkbox 
						v-for="(item, index) in checkboxList" 
						:key="index" :label="item.name" 
						:name="item.name"
					></uv-checkbox>
				</uv-checkbox-group>
				<text class="book">
					《用户协议》
				</text>
				<text>我已阅读用并同意</text>
			</view>
			<button :class="exbtn" @click="registerEvent">
				确定
			</button>
		</view>
		<view v-if="dioFlag" style="width: 100%; height: 100%; background-color: rgb(255, 255, 255);">
			<view class="information"></view>
			<view style="padding-left: 20px;padding-top: 5px;padding-bottom: 20px;"></view>
			<view class="article_content"></view>
			<view class="news_information">
				<view class="klllecf">
					<view class="news" @click="agreeClick">
						同意
					</view>
					<view class="news1" @click="disagreeClick">
						不同意
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {base64upload,realname} from '@/api/bonus.js';
	export default {
		data(){
			return{
				navstyle: {
					title: "签名认证",
					txtColor: "#333333",
					bgColor: "#FFFFFF",
					leftIcon: "arrow-left"
				},
				titleStyle: {
					fontWeight: 700
				},
				dioFlag:false,
				isShow:false,
				penColor: '#ffffff',
				bgColor:'black',
				penSize: 5,
				url: '',
				checkboxss:false,
				checkboxList: [{
					name: " "
				}],
				exbtn:"button",
				checkbox: [],
				openSmooth: true,
				radius: 0
			}
		},
		mounted() {
			
		},
	
		methods: {
			leftClick() {
				uni.reLaunch({
				  url: '/pages/index/user' // 替换成上一页的路径
				});
			},
			agreeClick(){
				this.radioName =false;
				this.dioFlag = false;
			},
			checkboxChange(){
				this.dioFlag = true;
			},
			disagreeClick(){
				this.radioName =true;
				this.dioFlag = false;
			},
			radioClick(){
				this.dioFlag = true;
			},
			showClick(){
				this.isShow = true
			},
			registerEvent(){
				base64upload({base64:this.url}).then(res=>{
					if(res.code==1){
						this.realnameEvent(res.data.url)	
					}
				})
			},
			realnameEvent(t){
				realname({authImage:t}).then(res=>{
					if(res.code == 1){
						uni.showToast({
							title: res.msg,
							icon: "success",
							duration: 2000
						}),
						setTimeout(()=>{
							uni.navigateBack({
								delta: 1
							})
						},2000)
						
					}
				})
			},
			onClick(type) {
				if(type == 'openSmooth') {
					 this.openSmooth = !this.openSmooth
					 return
				}
				if(type == "clear"){
					console.log(this.url)
					this.url = "";
					this.checkboxss = false;
					this.checkbox =  true ? this.exbtn = "exitbtn" : this.exbtn = "button" 
					console.log(this.url)
				}
				if (type == 'save') {
					this.$refs.signatureRef.canvasToTempFilePath({
						success: (res) => {
							console.log(res)
							// 是否为空画板 无签名
							console.log(res.isEmpty)
							// 生成图片的临时路径
							// H5 生成的是base64
							this.url = res.tempFilePath;
							this.checkboxss = true;
							this.checkbox =  true ? this.exbtn = "exitbtn" : this.exbtn = "button" 
						}
					})
					return
				}
				if (this.$refs.signatureRef)
					this.$refs.signatureRef[type]()
			}
		}
		
	}
</script>

<style>
	.qian{
		width: 100%;
	}
	.ming {
	    padding: 15px;
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	    width: 35%;
	    border-radius: 25px;
	    border: #d66c6b solid 1px;
	    color: #d66c6b;
	    margin: auto;
	    text-align: center;
	    margin-top: 10px;
	}
	.ming image {
	    width: 24px;
	    height: 24px;
	}
	.canvas-main{
	    width: 100%;
	    height: auto;
	}
	.signa .canvas{
	    background-color: #000;
	    position: relative;
	    z-index: 9999;
	}
	.list_input {
	    font-size: 14px;
	    padding: 10px;
	    align-items: center;
	    margin-top: 10px;
	}
	.book {
	    color: #007aff;
	    font-size: 12px;
	}
	.signa{
	    position: relative;
	    overflow: hidden;
	}
	
	button {
	    position: relative;
	    display: block;
	    margin-left: auto;
	    margin-right: auto;
	    padding-left: 14px;
	    padding-right: 14px;
	    box-sizing: border-box;
	    font-size: 18px;
	    text-align: center;
	    text-decoration: none;
	    line-height: 2.55555556;
	    border-radius: 5px;
	    overflow: hidden;
	    color: #000;
	    background-color: #f8f8f8;
	    cursor: pointer;
	}
	button:after {
	    content: " ";
	    width: 200%;
	    height: 200%;
	    position: absolute;
	    top: 0;
	    left: 0;
	    border: 1px solid rgba(0, 0, 0, .2);
	    -webkit-transform: scale(.5);
	    transform: scale(.5);
	    -webkit-transform-origin: 0 0;
	    transform-origin: 0 0;
	    box-sizing: border-box;
	    border-radius: 10px;
	}
	
	.exitbtn{
	    width: 80%;
	    border-radius: 50px;
	    background: linear-gradient(135deg, #d66c6b, #ed6266);
	    font-size: 14px;
	    margin: 32px auto 0 auto;
	    color: #fff;
	    padding: 3px 0;
	    border: none;
	}
	.button{
	    width: 80%;
	    border-radius: 50px;
	    background-color: #c8c7cc;
	    font-size: 14px;
	    margin: 32px auto 0 auto;
	    color: #333;
	    padding: 3px 0;
	    border: none;
		
	}
	
	.canvas-main .btn-list{
	    width: 100%;
	    height: 54px;
	    background: #fefffe;
	    box-shadow: 0 0 2px 0 rgba(0, 0, 0, .1);
	    display: flex;
	    align-items: center;
	    justify-content: space-around;
	}
	.canvas-main .btn-list .btn-reset{
	    width: 149px;
	    height: 36px;
	    background: #ccc;
	    border-radius: 21px;
	    border: 1px solid #e6e6e6;
	    font-size: 16px;
	    color: #3e3e3e;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	}
	.canvas-main .btn-list .btn-complete{
	    width: 149px;
	    height: 36px;
	    border-radius: 21px;
	    font-size: 16px;
	    color: #fff;
	    background: linear-gradient(#d66c6b, #ed6266);
	    display: flex;
	    align-items: center;
	    justify-content: center;
	}
	.information{
	    border-bottom: 1px solid #000;
	    text-align: center;
	    padding-left: 10px;
	}
	.article_content{
	    width: 90%;
	    height: 100hv;
	    font-size: 14px;
	    line-height: 28px;
	    color: #333;
	    overflow: hidden;
	    margin: auto;
	}
	.news_information{
	    width: 100%;
	    height: 50px;
	    display: flex;
	    position: fixed;
	    bottom: 55px;
	    align-items: center;
	    z-index: 999;
	    justify-content: center;
	}
	.klllecf {
	    width: 80%;
	    display: flex;
	    justify-content: space-around;
	}
	.news{
	    width: 60px;
	    text-align: center;
	    border-radius: 25px;
	    padding: 5px;
	    color: #fff;
	    background: linear-gradient(135deg, #e24646, #c53d3f);
	}
	.news1 {
	    width: 60px;
	    text-align: center;
	    padding: 5px;
	    color: #fff;
	    background: linear-gradient(135deg, #666, #666);
	}
</style>